﻿{extend name="public:base" /}{block name="css"}
<link href="/static/laydate/theme/default/laydate.css">
<style>
    .video-preview {
        min-width: 200px;
    }
</style>{/block}{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="row search-form">
                        <div id="ID-laydate-range" class="row col-sm-4 m-b-sm">
                            <div class="col-sm-6 m-b-sm">
                                <div class="input-group">
                                    <input placeholder="请选择开始日期" type="text" autocomplete="off" name="start_date" id="start_date" value="{:input('start_date')}" class="form-control form-control-lg" readonly>
                                </div>
                            </div>
                            <div class="col-sm-6 m-b-sm">
                                <div class="input-group">
                                    <input placeholder="请选择结束日期" type="text" autocomplete="off" name="end_date" id="end_date" value="{:input('end_date')}" class="form-control form-control-lg" readonly>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="status">
                                <option value="0">请选择状态</option>
                                <option value="-1" {:input(
                                'status') == -1 ? 'selected' : ''}>已驳回</option>
                                <option value="1" {:input(
                                'status') == 1 ? 'selected' : ''}>未打卡</option>
                                <option value="2" {:input(
                                'status') == 2 ? 'selected' : ''}>初审通过</option>
                                <option value="3" {:input(
                                'status') == 3 ? 'selected' : ''}>复审通过</option>
                            </select>
                        </div>

                        {if $user_type == 0 || $user_type == 5}
                        <!--  平台账号 || 客服账号  -->
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="company_user_id">
                                <option value="0">请选择分公司/运营中心</option>
                            </select>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="channel_user_id">
                                <option value="0">请选择渠道/团队长</option>
                            </select>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="shop_user_id">
                                <option value="0">请选择门店</option>
                            </select>
                        </div>

                        {elseif $user_type == 2}
                        <!--  分公司/运营中心账号  -->
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="channel_user_id">
                                <option value="0">请选择渠道/团队长</option>
                            </select>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="shop_user_id">
                                <option value="0">请选择门店</option>
                            </select>
                        </div>

                        {elseif $user_type == 3}
                        <!--  渠道账号  -->
                        <div class="col-sm-2 m-b-sm" id="shop-select" style="display: none">
                            <select class="form-control" name="shop_user_id">
                                <option value="0">请选择门店</option>
                                {volist name="shop_user_list" id="vo"}
                                <option value="{$vo.id}" {:input(
                                'shop_user_id') == $vo.id ? 'selected' : ''}>{$vo.username}</option>
                                {/volist}
                            </select>
                        </div>
                        {/if}

                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group" style="width: 100%; display: flex; justify-content: space-between">
                                <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>
                            </div>
                        </div>
                    </div>

                    <div class="hr-line-solid"></div>
                    <style>
                        .me-row {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            width: 100%;
                        }
                    </style>
                    <div class="me-row">
                        <h3>打卡数量：{$count}</h3>
                        <button type="button" style="float: right" class="btn btn-primary btn-lg excel-btn">复审通过财务专款计划导出</button>
                    </div>
                    <div class="hr-line-solid"></div>

                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>打卡客户</th>
                                <th>打卡日期</th>
                                <th>打卡天数</th>
                                <th>打卡视频</th>
                                <th>打卡图片</th>
                                <th>是否超期</th>
                                <th>是否打款</th>
                                <th>打款凭证</th>
                                <th>状态</th>
                                <th>驳回原因</th>
                                <th>打卡时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="list" id="vo"}
                            <tr>
                                <td>{$vo.username}</td>
                                <td>{$vo.ck_date}</td>
                                <td>{$vo.day}</td>
                                <td>
                                    <div class="video-preview">
                                        {volist name="$vo.video" id="v"}
                                        <video preload="none" controls style="max-width: 200px; max-height: 150px; margin-bottom: 10px;" src="{$v}"></video>
                                        {/volist}
                                    </div>
                                </td>
                                <td>
                                    {volist name="$vo.imgs" id="v"}
                                    <div class="form-uploaded-img-box">
                                        <img class="form-uploaded-box-img" src="{$v.path}" data-text="{$v.text}">
                                        <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview', '', '{$vo.imgs_text_json}')"></i>
                                    </div>
                                    {/volist}
                                </td>
                                <td>{$vo.is_over ? '是' : '否'}</td>
                                <td>{$vo.pay_desc}</td>
                                <td>
                                    {if $vo.img}
                                    <div class="form-uploaded-img-box">
                                        <img class="form-uploaded-box-img" src="{$vo.img}">
                                        <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview')"></i>
                                    </div>
                                    {/if}
                                </td>
                                <td>{$vo.status_text}</td>
                                <td>{$vo.remark}</td>
                                <td>{:timeFormat($vo.ck_time, 'Y-m-d H:i')}</td>
                                <td class="project-actions">

                                    {if $vo.status == 1}
                                    <a href="{:url(agreeUserClockStatus, ['id' => $vo.id])}" class="btn btn-white btn-sm ajax-operate"><i class="iconfont icon-success"></i> 通过
                                    </a>
                                    <div class="btn btn-white btn-sm" data-toggle="modal" data-target="#refuse" onclick="setId(`{$vo.id}`)">
                                        <i class="iconfont icon-refuse"></i> 驳回
                                    </div>
                                    {elseif $vo.status == 2}
                                    <a href="{:url(exportClock, ['id' => $vo.id])}" class="btn btn-white btn-sm ajax-operate"><i class="iconfont icon-folder"></i> 生成打卡记录
                                    </a>
                                    {/if}
                                    {if $vo.zip_download_url}
                                    <a href="{$vo.zip_download_url}" class="btn btn-white btn-sm"><i class="iconfont icon-success"></i> 下载打卡记录
                                    </a>
                                    {/if}
                                    {if $vo.is_pay == 0 && $vo.status == 2 && ($vo.pay_status == 0 || $vo.pay_status == -1)}
                                    <a href="{:url(doUserClockPay, ['id' => $vo.id])}" class="btn btn-white btn-sm" data-toggle="modal" data-target="#pay" onclick="setId(`{$vo.id}`)"><i class="iconfont icon-tixian"></i> 已打款
                                    </a>
                                    <a href="{:url(mchMoney, ['id' => $vo.id])}" class="btn btn-white btn-sm ajax-operate"><i class="iconfont icon-tixian"></i> 微信打卡返现
                                    </a>
                                    {/if}
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                        {if !empty($list)}{$list->render()}{/if}
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="refuse" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated flipInY">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">驳回</h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control remark" placeholder="请输入驳回原因">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white close-model" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="confirmRefuse">确认修改</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal" id="pay" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated flipInY">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">上传打款凭证</h4>
                </div>

                <div class="col-sm-6">
                    <input type="file" id="img_file" accept="image/*" style="display: none">
                    <input type="hidden" class="hidden_value" name="img" id="img" value="{$info['img']|default=''}"/>
                    <div class="btn btn-w-m btn-primary" onclick="uploadImage('img_file', 'img', 'form-uploaded-box-single', false, 1)">原图上传</div>

                    <div class="form-uploaded-box" id="form-uploaded-box-single" style="width: 140px">
                        <div class="form-uploaded-img-box">
                            <img class="form-uploaded-box-img" src="{:getPicture($info.img)}" data-id="{$info.img}">
                            <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview')"></i>
                            <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-white close-model" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save">确认修改</button>
                </div>
            </div>
        </div>
    </div>
</div>{include file="public/cropper-img-mask" cropper_uploaded_img_ids="cropper_uploaded_img_ids" cropper_uploaded_img_paths="cropper_uploaded_img_paths" crop_preview_box="crop-preview-box" /}{include file="public/preview-img-mask" swiper-id="cropper-preview" /}{/block}

{block name="js"}
<script src="/static/laydate/laydate.js"></script>
<script>
    laydate.render({
        elem: '.screen-date', //指定元素
        format: 'yyyy-MM-dd',
        range: true
    });
    laydate.render({
        elem: '#ID-laydate-range',
        range: ['#start_date', '#end_date']
    });

    var id = 0;

    function setId(row_id) {
        id = row_id
    }

    $('#confirmRefuse').click(function () {
        var remark = $('.remark').val();
        var url = "/admin/manage/refuseUserClockStatus";

        $.post(url, {
            id, remark
        }, function (res) {
            layer.msg(res.msg)
            if (res.result == 1) {
                $(".close-model").trigger("click");
                setTimeout(() => {
                    window.location.reload()
                }, 500)
            }
        }, 'json')
    })

    $('#save').click(function () {
        var img = $('#img').val();
        var url = "/admin/manage/doUserClockPay";

        $.post(url, {
            id, img
        }, function (res) {
            layer.msg(res.msg)
            if (res.result == 1) {
                $(".close-model").trigger("click");
                setTimeout(() => {
                    window.location.reload()
                }, 500)
            }
        }, 'json')
    })


    // 平台联动数据
    var company_user_list_json = `{$company_user_list_json}` ? JSON.parse(`{$company_user_list_json}`) : [];
    // 分公司/运营中心联动数据
    var channel_user_list_json = `{$channel_user_list_json}` ? JSON.parse(`{$channel_user_list_json}`) : [];

    // 初始化下拉框数据
    function initSelects() {
        // 获取当前URL中的用户类型
        var userType = parseInt('{$user_type}');

        // 初始化平台账号的下拉框（分公司->渠道->门店三级联动）
        if (userType === 0 || userType === 5) {
            initCompanyUserSelect();
        }
        // 初始化分公司/运营中心账号的下拉框（渠道->门店）
        else if (userType === 2) {
            initChannelUserSelect();
        } else if (userType == 3) {
            $('#shop-select').show();
        }
    }

    // 初始化分公司/运营中心下拉框
    function initCompanyUserSelect() {
        var companySelect = $('select[name="company_user_id"]');

        // 清空并添加默认选项
        companySelect.empty().append('<option value="0">请选择分公司/运营中心</option>');

        // 添加公司选项
        if (company_user_list_json && company_user_list_json.length > 0) {
            company_user_list_json.forEach(function (company) {
                var option = $('<option></option>')
                  .val(company.id)
                  .text(company.username);

                // 如果URL中有对应的公司ID，设置为选中
                var companyId = `{:input('company_user_id')}`;
                if (companyId && parseInt(company.id) === parseInt(companyId)) {
                    option.prop('selected', true);
                }

                companySelect.append(option);
            });
        }

        // 绑定公司选择变化事件
        companySelect.change(function () {
            var companyId = $(this).val();
            loadChannelUsers(companyId);
        });

        // 如果有初始选中的公司，加载对应的渠道
        var initialCompanyId = companySelect.val();
        if (initialCompanyId && initialCompanyId > 0) {
            loadChannelUsers(initialCompanyId);
        }
    }

    // 根据公司ID加载渠道数据
    function loadChannelUsers(companyId) {
        var channelSelect = $('select[name="channel_user_id"]');

        // 清空并添加默认选项
        channelSelect.empty().append('<option value="0">请选择渠道/团队长</option>');

        if (companyId > 0) {
            // 查找对应的公司
            var company = company_user_list_json.find(function (item) {
                return item.id == companyId;
            });

            // 如果找到公司且有渠道列表
            if (company && company.channel_user_list && company.channel_user_list.length > 0) {
                // 添加渠道选项
                company.channel_user_list.forEach(function (channel) {
                    var option = $('<option></option>')
                      .val(channel.id)
                      .text(channel.username);

                    // 如果URL中有对应的渠道ID，设置为选中
                    var channelId = `{:input('channel_user_id')}`;
                    if (channelId && parseInt(channel.id) === parseInt(channelId)) {
                        option.prop('selected', true);
                    }

                    channelSelect.append(option);
                });
            }
        }

        // 绑定渠道选择变化事件
        channelSelect.off('change').on('change', function () {
            var channelId = $(this).val();
            loadShopUsersByCompany(companyId, channelId);
        });

        // 如果有初始选中的渠道，加载对应的门店
        var initialChannelId = channelSelect.val();
        if (initialChannelId && initialChannelId > 0) {
            loadShopUsersByCompany(companyId, initialChannelId);
        } else {
            // 清空门店选择框
            $('select[name="shop_user_id"]').empty().append('<option value="0">请选择门店</option>');
        }
    }

    // 根据公司ID和渠道ID加载门店数据（平台账号）
    function loadShopUsersByCompany(companyId, channelId) {
        var shopSelect = $('select[name="shop_user_id"]');

        // 清空并添加默认选项
        shopSelect.empty().append('<option value="0">请选择门店</option>');

        if (companyId > 0 && channelId > 0) {
            // 查找对应的公司
            var company = company_user_list_json.find(function (item) {
                return item.id == companyId;
            });

            if (company && company.channel_user_list) {
                // 查找对应的渠道
                var channel = company.channel_user_list.find(function (item) {
                    return item.id == channelId;
                });

                // 如果找到渠道且有门店列表
                if (channel && channel.shop_user_list && channel.shop_user_list.length > 0) {
                    // 添加门店选项
                    channel.shop_user_list.forEach(function (shop) {
                        var option = $('<option></option>')
                          .val(shop.id)
                          .text(shop.username);

                        // 如果URL中有对应的门店ID，设置为选中
                        var shopId = `{:input('shop_user_id')}`;
                        if (shopId && parseInt(shop.id) === parseInt(shopId)) {
                            option.prop('selected', true);
                        }

                        shopSelect.append(option);
                    });
                }
            }
        }
    }

    // 初始化渠道下拉框（分公司/运营中心账号）
    function initChannelUserSelect() {
        var channelSelect = $('select[name="channel_user_id"]');

        // 清空并添加默认选项
        channelSelect.empty().append('<option value="0">请选择渠道/团队长</option>');

        // 添加渠道选项
        if (channel_user_list_json && channel_user_list_json.length > 0) {
            channel_user_list_json.forEach(function (channel) {
                var option = $('<option></option>')
                  .val(channel.id)
                  .text(channel.username);

                // 如果URL中有对应的渠道ID，设置为选中
                var channelId = `{:input('channel_user_id')}`;
                if (channelId && parseInt(channel.id) === parseInt(channelId)) {
                    option.prop('selected', true);
                }

                channelSelect.append(option);
            });
        }

        // 绑定渠道选择变化事件
        channelSelect.change(function () {
            var channelId = $(this).val();
            loadShopUsers(channelId);
        });

        // 如果有初始选中的渠道，加载对应的门店
        var initialChannelId = channelSelect.val();
        if (initialChannelId && initialChannelId > 0) {
            loadShopUsers(initialChannelId);
        }
    }

    // 根据渠道ID加载门店数据
    function loadShopUsers(channelId) {
        var shopSelect = $('select[name="shop_user_id"]');

        // 清空并添加默认选项
        shopSelect.empty().append('<option value="0">请选择门店</option>');

        if (channelId > 0) {
            // 查找对应的渠道
            var channel = channel_user_list_json.find(function (item) {
                return item.id == channelId;
            });

            // 如果找到渠道且有门店列表
            if (channel && channel.shop_user_list && channel.shop_user_list.length > 0) {
                // 添加门店选项
                channel.shop_user_list.forEach(function (shop) {
                    var option = $('<option></option>')
                      .val(shop.id)
                      .text(shop.username);

                    // 如果URL中有对应的门店ID，设置为选中
                    var shopId = `{:input('shop_user_id')}`;
                    if (shopId && parseInt(shop.id) === parseInt(shopId)) {
                        option.prop('selected', true);
                    }

                    shopSelect.append(option);
                });
            }
        }
    }

    // 页面加载完成后初始化
    $(function () {
        initSelects();
    });
</script>{/block}

